<template>
  <div class="play_list m_pr">
    <!-- 返回 -->
    <van-icon name="arrow-left" class="back m_pa m_pl0 m_z2 m_fs20" color="#fff"
      @click="$router.back()"/>
    <!-- 视频列表 -->
    <video-list :list="videoList" :initIndex="initIndex" :current="current"></video-list>
    <!-- 评论 -->
    <div class="m_pa m_pb0 m_pl0 m_pr0 m_z3">
      <van-field v-model="content" center placeholder="戳我评论">
        <template #button>
          <van-button size="small" type="primary" color="#008080" @click="doComment">发送</van-button>
        </template>
      </van-field>
    </div>
  </div> 
</template>

<script>
import {mapState} from 'vuex'
import VideoList from '@/components/VideoList.vue'
export default {
  name: 'PlayList',
  components:{
    VideoList
  },
  data(){
    return {
      content: '',
      initIndex: Number(this.$route.query.initIndex),
      current: Number(this.$route.query.initIndex),
    }
  },
  computed:{
    ...mapState('m_video',['videoList']),
  },
  watch: {
    current(){
      if(this.current==this.videoList.length-1 && this.$route.path=='/play'){
        this.$toast({message:'到底啦',position:'bottom'})
      }
    }
  },
  methods: {
    // 发表评论
    doComment(){
      // 评论内容为空
      if(this.content.trim() === ''){
        return this.$toast('评论空空哦')
      }
      // 没有登录
      if(!localStorage.getItem('token')){
        this.$dialog.confirm({
          title: '温馨提示',
          message: '需要登录后才可以哦',
          confirmButtonText: '去登录',
          confirmButtonColor: '#008080',
        }).then(()=>{
          this.$router.push('/login')
        }).catch(()=>{})
        return
      }
      // 发表
      this.axios.post('/comment',{
        videoId: this.videoList[this.current].id,
        content: this.content
      }).then(res=>{
        if(res.code==0){
          this.content = ''
          this.videoList[this.current].commentCount++
          this.$toast('发表成功')
        }else{
          this.$toast('发表失败')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.play_list{
  height: 100vh;
  .back{
    left: 15px;
    top: 10px;
  }
}
</style>